<!--
页面名称: baiduMapView.vue
页面描述: 该页面为展示地图周边
开发人员: Vikanong
开发时间: 2018-xx-xx
其他说明: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-->
<template>
  <div class>
    <el-row>
      <el-col :span="6">
        <el-tabs type="border-card" v-model="peripheryVal" @tab-click="handleClick">
          <el-tab-pane
            :label="item.name"
            :value="item.name"
            :name="item.name"
            v-for="(item,idnex) in peripheryMenu"
            :key="idnex"
          >
            <el-tabs v-model="peripheryVal2" @tab-click="handleClick2">
              <el-tab-pane
                :label="itm.name"
                :value="itm.name"
                :name="itm.name"
                v-for="(itm,ind) in item.list"
                :key="ind"
              ></el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <div id="BMapresults" class="BMapresults"></div>
        </el-tabs>
      </el-col>
      <el-col :span="18">
        <baidu-map class="bm-view" ak="9aV9lMwHBbAktSKxpnG6ADMqXEv2p8iV" @ready="handler">
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
          <!-- <bm-marker
                v-for="marker of markers"
                :key="marker.code"
                :position="{lng: marker.lng, lat: marker.lat}"
                @click="lookDetail(marker)"
              >
          </bm-marker>-->
        </baidu-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { BaiduMap, BmGeolocation } from "vue-baidu-map";
export default {
  data() {
    return {
      //周边菜单
      peripheryMenu: [
        {
          name: "交通",
          val: "",
          list: [
            {
              name: "地铁",
              val: "",
              num: "1"
            },
            {
              name: "公交",
              val: "",
              num: "1"
            },
            {
              name: "车站",
              val: "",
              num: "1"
            }
          ]
        },
        {
          name: "教育",
          val: "",
          list: [
            {
              name: "幼儿园",
              val: "",
              num: "1"
            },
            {
              name: "小学",
              val: "",
              num: "1"
            },
            {
              name: "中学",
              val: "",
              num: "1"
            },
            {
              name: "大学",
              val: "",
              num: "1"
            }
          ]
        },
        {
          name: "医疗",
          val: "",
          list: [
            {
              name: "医院",
              val: "",
              num: "1"
            },
            {
              name: "药店",
              val: "",
              num: "1"
            }
          ]
        },
        {
          name: "购物",
          val: "",
          list: [
            {
              name: "商场",
              val: "",
              num: "1"
            },
            {
              name: "超市",
              val: "",
              num: "1"
            },
            {
              name: "市场",
              val: "",
              num: "1"
            }
          ]
        },
        {
          name: "生活",
          val: "",
          list: [
            {
              name: "银行",
              val: "",
              num: "1"
            },
            {
              name: "ATM",
              val: "",
              num: "1"
            }
          ]
        },
        {
          name: "娱乐",
          val: "",
          list: [
            {
              name: "公园",
              val: "",
              num: "1"
            },
            {
              name: "电影院",
              val: "",
              num: "1"
            },
            {
              name: "KTV",
              val: "",
              num: "1"
            }
          ]
        }
      ],
      //搜索周边value
      peripheryVal: "交通",
      peripheryVal2: "地铁",
      map: {},
      position: {}
    };
  },
  props: ["latitudeVal"],
  components: {
    BaiduMap,
    BmGeolocation
  },
  created() {
    let _this = this;
  },
  mounted() {
    let _this = this;
  },
  methods: {
    //创建地图
    handler({ BMap, map }) {
      let _this = this;
      _this.map = map;
      // map.centerAndZoom("成都"); //设置中心点
      //开启鼠标滚轮缩放,默认关闭
      map.enableScrollWheelZoom(false);
      //添加缩略图控件
      map.addControl(
        new BMap.OverviewMapControl({
          isOpen: false,
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        })
      );
      //添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      this.getPeriphery(this.peripheryVal2);
    },
    //地图添加标记
    setMaker() {
      if (this.latitudeVal) {
        this.position = {
          lng: this.latitudeVal.split(",")[0],
          lat: this.latitudeVal.split(",")[1]
        };
        let point = new BMap.Point(this.position.lng, this.position.lat);
        let marker = new BMap.Marker(point);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
        this.map.addOverlay(marker);
        this.map.centerAndZoom(point, 16);

        // var circle = new BMap.Circle(point, 1000, {
        //   fillColor: "blue",
        //   strokeWeight: 1,
        //   fillOpacity: 0.4,
        //   strokeOpacity: 0.5
        // });
        // var opts = {
        //   position: point, // 指定文本标注所在的地理位置
        //   offset: new BMap.Size(-20, -20) //设置文本偏移量
        // };
        // var label = new BMap.Label("天安门 120套", opts); // 创建文本标注对象
        // label.setStyle({
        //   width: "50px",
        //   whiteSpace: "break-word",
        //   color: "#FFF",
        //   backgroundColor: "transparent", //文本背景色
        //   borderColor: "transparent", //文本框边框色
        //   fontSize: "12px",
        //   height: "20px",
        //   lineHeight: "20px",
        //   fontFamily: "微软雅黑"
        // });
        // //添加覆盖物
        // this.map.addOverlay(circle); //增加圆
        // this.map.addOverlay(label); //增加文本
        // this.map.centerAndZoom(point, 13);
      }
    },

    //获取周边并标记地图
    getPeriphery(val) {
      let _this = this;
      this.map.clearOverlays();
      this.setMaker();
      if (val != "") {
        let point = new BMap.Point(this.position.lng, this.position.lat);
        let local = new BMap.LocalSearch(_this.map, {
          renderOptions: {
            map: _this.map,
            panel: "BMapresults"
          }
        });
        local.searchNearby(val, point, 1000);
      }
    },

    delete() {
      var overlays = this.map.getOverlays();
      for (var i = 0; i < overlays.length; i++) {
        if (overlays[i].getTitle() == name) {
          this.map.removeOverlay(overlays[i]);
        }
      }
    },

    handleClick(val) {
      this.peripheryVal2 = this.peripheryMenu[Number(val.index)].list[0].name;
      this.getPeriphery(this.peripheryVal2);
    },
    handleClick2(val) {
      this.getPeriphery(this.peripheryVal2);
    }
  },
  computed: {}
};
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
#BMapresults {
  width: 100%;
  height: 376px;
  overflow: auto;
}
</style>